<!-- 发票信息表格 -->
<template>
  <div class="invoice-info">
    <div class="invoice-info-header">
      <el-button type="primary" size="small" @click="handleAdd">新增发票</el-button>
      <el-button type="danger" size="small" @click="handleDelete" :disabled="selectedIds.length === 0">批量删除</el-button>
    </div>

    <el-table
      ref="invoiceTable"
      :data="invoiceList"
      stripe
      border
      size="small"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="invoiceType" label="发票种类" align="center" width="100" />
      <el-table-column prop="invoiceTitle" label="发票抬头" align="center" width="150" />
      <el-table-column prop="invoiceCategory" label="发票类型" align="center" width="100" />
      <el-table-column prop="invoiceContent" label="发票内容" align="center" width="120" />
      <el-table-column prop="taxNumber" label="纳税人识别号" align="center" width="160" />
      <el-table-column prop="bankName" label="开户行" align="center" width="120" />
      <el-table-column prop="accountNumber" label="账号" align="center" width="140" />
      <el-table-column prop="address" label="地址" align="center" width="120" show-overflow-tooltip />
      <el-table-column prop="phone" label="电话" align="center" width="120" />
      <el-table-column prop="invoiceAmount" label="发票金额" align="center" width="100">
        <template slot-scope="scope">
          ¥{{ scope.row.invoiceAmount }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteSingle(scope.row)"
            style="color: #f56c6c;"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增发票弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发票种类" prop="invoiceType">
              <el-select v-model="form.invoiceType" placeholder="请选择发票种类" style="width: 100%">
                <el-option label="增值税专用发票" value="增值税专用发票" />
                <el-option label="增值税普通发票" value="增值税普通发票" />
                <el-option label="增值税电子发票" value="增值税电子发票" />
                <el-option label="机动车销售统一发票" value="机动车销售统一发票" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票抬头" prop="invoiceTitle">
              <el-input v-model="form.invoiceTitle" placeholder="请输入发票抬头" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceCategory">
              <el-select v-model="form.invoiceCategory" placeholder="请选择发票类型" style="width: 100%">
                <el-option label="企业" value="企业" />
                <el-option label="个人" value="个人" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票内容" prop="invoiceContent">
              <el-input v-model="form.invoiceContent" placeholder="请输入发票内容" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="纳税人识别号" prop="taxNumber">
              <el-input v-model="form.taxNumber" placeholder="请输入纳税人识别号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入开户行" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账号" prop="accountNumber">
              <el-input v-model="form.accountNumber" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票金额" prop="invoiceAmount">
              <el-input
                v-model.number="form.invoiceAmount"
                placeholder="请输入发票金额"
                type="number"
                min="0"
                step="0.01"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 临时占位API，等后端接口完成后替换
const listInvoiceByOrderId = (orderId) => {
  return Promise.resolve({
    data: [
      // 模拟数据
      {
        id: 1,
        invoiceType: '增值税专用发票',
        invoiceTitle: '北京某某科技有限公司',
        invoiceCategory: '企业',
        invoiceContent: '技术服务费',
        taxNumber: '91110000123456789X',
        bankName: '中国银行北京分行',
        accountNumber: '1234567890123456789',
        address: '北京市朝阳区某某街道123号',
        phone: '010-12345678',
        invoiceAmount: 10000.00
      }
    ]
  });
};

const delInvoice = (ids) => {
  return Promise.resolve({ msg: '删除成功' });
};

const addInvoice = (data) => {
  return Promise.resolve({ msg: '新增成功' });
};

export default {
  name: 'InvoiceInfo',
  props: {
    orderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      // 发票列表
      invoiceList: [],
      // 选中的发票记录ID
      selectedIds: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        invoiceType: [
          { required: true, message: "发票种类不能为空", trigger: "change" }
        ],
        invoiceTitle: [
          { required: true, message: "发票抬头不能为空", trigger: "blur" }
        ],
        invoiceCategory: [
          { required: true, message: "发票类型不能为空", trigger: "change" }
        ],
        invoiceContent: [
          { required: true, message: "发票内容不能为空", trigger: "blur" }
        ],
        taxNumber: [
          { required: true, message: "纳税人识别号不能为空", trigger: "blur" }
        ],
        bankName: [
          { required: true, message: "开户行不能为空", trigger: "blur" }
        ],
        accountNumber: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "电话不能为空", trigger: "blur" }
        ],
        invoiceAmount: [
          { required: true, message: "发票金额不能为空", trigger: "blur" },
          { type: "number", message: "发票金额必须为数字", trigger: "blur" }
        ]
      }
    }
  },
  watch: {
    orderId: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
      immediate: true
    }
  },
  methods: {
    /** 查询发票信息列表 */
    getList() {
      if (!this.orderId) return;

      listInvoiceByOrderId(this.orderId).then(response => {
        this.invoiceList = response.data || [];
      });
    },

    // 表单重置
    reset() {
      this.form = {
        invoiceType: undefined,
        invoiceTitle: undefined,
        invoiceCategory: undefined,
        invoiceContent: undefined,
        taxNumber: undefined,
        bankName: undefined,
        accountNumber: undefined,
        address: undefined,
        phone: undefined,
        invoiceAmount: undefined,
        orderId: this.orderId
      };
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加发票信息";
    },

    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    },

    /** 删除按钮操作 */
    handleDelete() {
      if (this.selectedIds.length === 0) {
        this.$message.warning("请选择要删除的发票记录");
        return;
      }

      this.$confirm('是否确认删除选中的发票记录?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delInvoice(this.selectedIds);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {});
    },

    /** 单个删除操作 */
    handleDeleteSingle(row) {
      this.$confirm('是否确认删除这条发票记录?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delInvoice([row.id]);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {});
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.orderId = this.orderId;
          addInvoice(this.form).then(response => {
            this.$message.success("新增成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },

    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.invoice-info {
  &-header {
    margin-bottom: 10px;
  }
}
</style>

